<template>
    <div class="password">
        <h2 class="tit">密码强度配置</h2>
        <Form :model="formItem"  label-position="left">
            <div class = 'main'>
				<p class="title">基本信息</p>
                <Row class="box">
                    <Col span="8">                    
                        <Row :gutter='16'>
                            <Col span="15">
                                <FormItem label="密码等级：">
                                    <InputNumber :min="1" :max='3' v-model="formItem.value4" class="input"></InputNumber>
                                </FormItem>
                            </Col>
                            <Col span="2">
                                <small>级</small>
                            </Col>
                            <Col span="20">
                                <span class="span">说明：一级（密码需8-16位,任意字符）；二级（密码需8-16位,包含字母和数字或特殊符号）；三级（密码需8-16位,包含大小字母和数字或特殊符号）。</span>
                            </Col>
                        </Row>
                    </Col>
                    <Col span="8">
                        <Row :gutter='16'>
                            <Col span="15">
                                <FormItem label="密码周期：">
                                    <InputNumber :min="1" v-model="formItem.value5" class="input"></InputNumber>
                                </FormItem>
                            </Col>
                            <Col span="2">
                                <small>天</small>
                            </Col>
                            <Col span="20">
                                <span class="span">说明：登录密码失效周期。</span>
                            </Col>
                        </Row>
                    </Col>
                    <Col span="8">
                        
                        <Row>
                            <Col span="16">
                                <FormItem label='二次验证：'>
                                    <iSwitch v-model="formItem.value6" size="large">
                                        <span slot="open">开启</span>
                                        <span slot="close">关闭</span>
                                    </iSwitch>
                                </FormItem>
                            </Col>
                            <Col span="20">
                                <span class="span">说明：是否开启二次验证</span>
                            </Col>
                        </Row>
                    </Col>               
                </Row>
            </div>
            <div style="width:100%;text-align:center">
                <Button type="primary" @click="submit(formItem)" :disabled='disabledSave'>
                    <Icon type="ios-checkmark" style="margin-right: 5px" />保存
                </Button>
            </div>
        </Form>
    </div>
</template>
<script>
    import api from "@/api/commonApi";
    export default {
        data() {
            return {
                formItem: {
                    value4: '',
                    value5: '',
                    value6: false,
                },
                status:null,
                historylist:[],
                disabledSave: false
            }
        },
        created() {
            let breadList = [
                { path: "/index", title: "首页" },
                {
                    path: "",
                    title: "系统运营参数配置"
                },
                {
                    path: "/index/configuration/password/index",
                    title: "密码强度配置"
                }
            ];
            this.$emit("changeBreadList", breadList);
        },
        mounted(){
            this.$axios.post(api.findConfigList,{}).then(res => {
                console.log('时限',res)
                if (res.data.code === 1) {
                    this.historylist = res.data.object
                    console.log(this.historylist)
                    if(this.historylist.length<=0){
                        this.status = 0
                    }else{
                        this.status = 1
                        this.formItem.value4 = this.historylist[11].configValue
                        this.formItem.value5 = this.historylist[12].configValue
                        this.formItem.value6 = Boolean(Number(this.historylist[13].configValue))
                    }
                } else {
                    this.$Message.error('请求异常');
                    return false;
                }
            }).catch(() => {
                this.loading = false;
            });
        },
        methods:{
            submit(e){
                this.disabledSave = true
                let params;
                if(this.status == 0){
                    console.log('1',this.formItem.value6)
                    params = [
                        {
                            "id": '0',
                            "configKey": "password_level",
                            "configName": "密码等级",
                            "configExplain": "登录密码等级设置",
                            "configValue": this.formItem.value4.toString(),
                        },
                        {
                            "id": '0',
                            "configKey": "password_period",
                            "configName": "密码周期",
                            "configExplain": "登录密码失效周期",
                            "configValue": this.formItem.value5.toString(),
                        },
                        {
                            "id": '0',
                            "configKey": "verify_again",
                            "configName": "二次验证",
                            "configExplain": "1位开启，非1为关闭",
                            "configValue": Number(this.formItem.value6),
                        },
                    ]
                }else{
                    console.log('2',Number(this.formItem.value6))
                    params = [
                        {
                            "id": this.historylist[11].id,
                            "configKey": "password_level",
                            "configName": "密码等级",
                            "configExplain": "登录密码等级设置",
                            "configValue": this.formItem.value4
                        },
                        {
                            "id": this.historylist[12].id,
                           "configKey": "password_period",
                            "configName": "密码周期",
                            "configExplain": "登录密码失效周期",
                            "configValue": this.formItem.value5
                        },
                        {
                            "id": this.historylist[13].id,
                            "configKey": "verify_again",
                            "configName": "二次验证",
                            "configExplain": "1位开启，非1为关闭",
                            "configValue": Number(this.formItem.value6),
                        },
                    ]
                }
                console.log(params)
                this.$axios.post(api.createConfigList,params).then(res => {
                    if (res.data.code === 1) {
                        this.$Message.success('密码强度配置成功');
                        setTimeout(() => {
                            this.disabledSave = false
                        }, 1000);
                    } else {
                        this.$Message.error('密码强度配置失败，请稍后重试');
                        setTimeout(() => {
                            this.disabledSave = false
                        }, 1000);
                        return false;
                    }
                }).catch(() => {
                    this.loading = false;
                });
            },
        },
    }
</script>
<style scoped lang="less">
    .password {
        width: 100%;
        min-width: 1200px;
        min-height: 600px;
        padding: 20px 0px 10px 0px;
        margin: 0 auto;
        background: #fff;
        .tit {
            margin:10px 0;
            font-weight:bold;
            text-align:center;
        }
        .main {		
            width: 98%;
            display: flex;
            flex-direction: column;
            margin: 10px auto;
            border: 1px solid #f0f0f0;
            box-shadow: 0 4px 3px #ebedf8;
            border-radius: 5px;
            margin-bottom: 20px;
            .title {
                font-size: 20px;
                padding-left: 15px;
                margin-bottom: 20px;
                color: #333;
                height: 40px;
                line-height: 40px;
                background: #ebedf8;         
            }
            .box {
               padding-left: 60px;
               padding-bottom: 20px;
            }
        }
        .input{
            width: 200px;
        }
        small{
            color: #333;
            font-size: 12px;
            line-height: 35px;
            margin-left: -15px;
        }
        .span{
            color:#ff9966;
            display: inline-block;
            height: 50px;
            margin-bottom: 20px;
            font-size: 12px;
            line-height: 25px;
        }
    }
</style>